<template>
  <div>
    <ul class="tab">
      <li
        @click="add(index, item.tab)"
        :class="{ active: indexs == index }"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item.title }}
      </li>
    </ul>
    <ul class="box">
      <li v-for="(item, index) in list1" :key="index">
        <img :src="item.author.avatar_url" alt="" />
        <h5
          :class="[
            { car1: item.good === true },
            { car2: item.top === true },
            { 'topiclist-tab': item.good !== true && item.top !== true },
          ]"
        >
          {{ item | tabTtem }}
        </h5>
        <div class="box1">
          <p @click="goItem(item.id)">{{ item.title }}</p>
          <h6>
            {{ item.reply_count }}/
            <span>{{ item.visit_count }}</span>
          </h6>
        </div>
        <div class="box2">{{ item.last_reply_at | formDate }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [
        {
          tab: "all",
          title: "全部",
        },
        {
          tab: "good",
          title: "精华",
        },
        {
          tab: "share",
          title: "分享",
        },
        {
          tab: "ask",
          title: "问答",
        },
        {
          tab: "job",
          title: "招聘",
        },
        {
          title: "客户端测试",
        },
      ],
      indexs: 1,
      list1: [],
      tab: "",
    };
  },
  methods: {
    carList() {
      axios.get("https://cnodejs.org/api/v1/topics").then((res) => {
        console.log(res);
        this.list1 = res.data.data;
      });
    },
    add(index, val) {
      this.indexs = index;
      this.tab = val;
      this.carList();
    },
    goItem(id) {
      console.log(id);
      this.$router.push({ name: "about", params: { id: id } });
    },
  },
  created() {
    this.carList();
  },

  filters: {
    tabTtem(item) {
      if (item.good == true) {
        return "精华";
      } else if (item.top == true) {
        return "置顶";
      } else if (item.tab == "ask") {
        return "问答";
      } else if (item.tab == "share") {
        return "分享";
      } else {
        return "招聘";
      }
    },
    formDate(str) {
      if (!str) return "";
      var date = new Date(str);
      var time = new Date().getTime() - date.getTime(); //现在时间-传入时间=相差时间
      if (time < 0) {
        return "";
      } else if (time / 1000 < 30) {
        return "刚刚";
      } else if (time / 1000 < 60) {
        return parseInt(time / 1000) + "秒前";
      } else if (time / 60000 < 60) {
        return parseInt(time / 60000) + "分钟前";
      } else if (time / 3600000 < 24) {
        return parseInt(time / 3600000) + "个小时前";
      } else if (time / 86400000 < 31) {
        return parseInt(time / 84600000) + "天前";
      } else if (time / 2592000000 < 12) {
        return parseInt(time / 2592000000) + "个月前";
      } else {
        return parseInt(time / 31536000000) + "年前";
      }
    },
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='stylus' scoped>
.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  color: #80bd01;
  background: #eee;

  li {
    height: 30px;
    text-align: center;
    line-height: 30px;
    padding: 0 10px;
  }

  .active {
    background: #80bd01;
    color: #fff;
    border-radius: 5px;
  }
}

.box {
  li {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;

    img {
      width: 40px;
      height: 40px;
    }

    h5 {
      margin: 0 10px
    }

    .box1 {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .box2 {
      width: 40px;
      height: 40px;
    }
  }
}
.car1, .car2 {
  background: #80bd01;
  padding: 0.04rem 0.08rem;
  border-radius: 0.06rem;
  color: #fff;
  font-size: 0.24rem;
  margin-right: 0.2rem;
}
</style>
